<template>
  <div class="audiobox">
    <div class="infobox">
      <div class="img" @click="golyrics">
        <!-- <img :src="getImgUrl" alt /> -->
        <img src="../../../../static/images/user.jpg" alt="" />
      </div>
      <div class="audioinfo">
        <span class="name t_span">如何</span>
        <span class="author t_span">添儿呗</span>
      </div>
      <div class="info_bg"></div>
    </div>
    <div class="control">
      <div>
        <i @click="prevSong" class="iconfont icon-shangyishou"></i>
      </div>
      <div class="play_pause" @click="play_pause">
        <i v-if="!getState" class="iconfont icon-bofang"></i>
        <i v-else class="iconfont icon-tingzhi"></i>
      </div>
      <div>
        <i @click="nextSong" class="iconfont icon-xiayishou"></i>
      </div>
    </div>
    <div class="probox">
      <el-slider
        v-model="value"
        :show-tooltip="false"
        @change="move"
      ></el-slider>
    </div>
    <div class="other">
      <div class="time">
        <span>{{ currentTime | formDate }}</span>
        <span>|</span>
        <span>{{ duration | formDate }}</span>
      </div>
      <div class="sound">
        <span class="s_btn" @click="changeVolume">
          <i class="iconfont icon-ziyuanldpi" v-if="volume == 0"></i>
          <i class="iconfont icon-ziyuanldpi2" v-if="volume > 0"></i>
        </span>
        <ul @click="changeSound">
          <li
            v-for="index of 10"
            :key="index"
            :data-index="index"
            :class="volume >= index ? 'v_active' : ''"
          ></li>
        </ul>
      </div>
      <div class="model" @click="changeModel">
        <i v-if="getModel == 0" class="iconfont icon-xunhuan"></i>
        <i v-else-if="getModel == 1" class="iconfont icon-xunhuan1"></i>
        <i v-else-if="getModel == 2" class="iconfont icon-suiji"></i>
      </div>
      <div class="lybox">
        <div
          class="lybtu"
          :class="isly ? 'lyactive' : ''"
          @click="isly = !isly"
        >
          <i class="iconfont icon-ci-copy"></i>
        </div>
      </div>
      <div class="menu">
        <!-- 播放列表 -->
        <transition name="el-fade-in-linear">
          <div v-show="show" class="menulist">
            <div class="listbox">
              <div class="listitle">
                <!-- <span>播放列表：共 {{ getMusicList.length }} 首</span> -->
                <span>播放列表：共 10 首</span>
                <span class="el-icon-delete delete" @click="delall"></span>
              </div>
              <div class="scrollbox">
                <div
                  v-for="(item, index) in getMusicList"
                  :key="index"
                  class="item"
                >
                  <span
                    class="name"
                    :class="getIndex == index ? 'active_color' : ''"
                    @click="playSong(index)"
                    >{{ item.name }}</span
                  >
                  <span
                    class="el-icon-delete delete"
                    @click="deleteSong(index)"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </transition>
        <!-- 播放列表图标 -->
        <div class="memu_btn" @click="show = !show">
          <i class="iconfont icon-caidan"></i>
        </div>
      </div>
    </div>

    <!-- <audio id="myaudio" :src="getMusicUrl"></audio> -->
    <audio id="myaudio"></audio>
    <!-- <div class="bgbox">
      <img src="../../../../static/images/user.jpg" class="bg" alt="" />
      <div class="bg-mask"></div>
    </div> -->
    <!-- <img :src="getImgUrl" alt class="bg" /> -->
  </div>
</template>
<script>
// import { mapGetters } from "vuex"
export default {
  data() {
    return {
      isly: false,
      val: "",
      show: false,
      cwidth: "0%",
      currentTime: "00",
      duration: "00",
      leftdis: "0px",
      isPlay: false,
      id: "",
      prowidth: null,
      currentIndex: 0,
      value: 0,

      getState: false,
      getModel: 0,
      getMusicList: [],
      volume: 3,
      sound: 3,
      isMute: false,
    }
  },
  computed: {
    // vue辅助函数
    // ...mapGetters([
    //   "getName",
    //   "getAuthor",
    //   "getMusicUrl",
    //   "getImgUrl",
    //   "getIndex",
    //   "getModel",
    //   "getMusicList",
    //   "getState",
    // ]),
  },
  filters: {
    formDate(date) {
      //格式化时间过滤器
      var m = parseInt(date / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt(date % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  // created() {
  //   this.$EventBus.$on("play_pause", () => {
  //     //由Play组件触发，更改播放状态
  //     this.play_pause()
  //   })
  // },
  mounted() {
    var audio = document.getElementById("myaudio")

    //监听音频是否可以开始播放
    audio.addEventListener("canplay", () => {
      this.val = this.getName + " — " + this.getAuthor
      this.$store.commit("upDateStatus", this.$store.state.song.songName)
      this.duration = audio.duration
    })

    // 监听歌曲是否已经播放结束
    audio.addEventListener("ended", () => {
      if (this.getModel == 1) {
        //当播放模式是循环时
        audio.load()
        audio.setAttribute("autoplay", "autoplay")
      } else {
        this.$store.commit("next")
      }
    })

    if (document.body.clientWidth > 600) {
      // 监听音频播放位置的改变
      audio.addEventListener("timeupdate", () => {
        this.currentTime = audio.currentTime
        this.cwidth = (this.currentTime / this.duration) * 100 + "%"
        this.leftdis =
          this.prowidth * (this.currentTime / this.duration) - 9 + "px"
        if (this.$store.state.song.lyric) {
          let lyricArray = this.$store.state.song.lyric
          let length = lyricArray.length
          if (length) {
            //获取歌词数字
            // //计算滚动条的位置
            if (this.currentIndex >= 8) {
              this.scrolltop = (this.currentIndex - 8) * 30
            }
            //遍历所有歌词
            //最后一句歌词没有下一句,所以不需要跟下一句的时间做比较
            if (this.currentIndex == length - 2) {
              //判断当前的时间是否大于等于最后一句的时间
              if (this.currentTime >= lyricArray[length - 1][0]) {
                //正在唱最后一句
                this.currentIndex = length - 1
                this.val = lyricArray[length - 1][1]
              }
            } else {
              for (var i = 0; i < length - 1; i++) {
                //将每个歌曲进度都跟数组中的歌词比较,在当前歌词的时间到下一句歌词的时间范围之内
                if (
                  this.currentTime >= lyricArray[i][0] &&
                  this.currentTime < lyricArray[i + 1][0]
                ) {
                  //设置正在播放的行号
                  this.currentIndex = i
                  this.val = lyricArray[i][1]
                }
              }
            }
          }
        }
      })
    }

    //获取link（ico）标签（为了修改成歌曲的图片）
    var links = document.getElementsByTagName("link")[0]

    audio.addEventListener("play", () => {
      document.title = this.$store.state.song.name
      links.setAttribute("href", this.getImgUrl)
      //播放状态
      this.isPlay = false
    })
    audio.addEventListener("pause", () => {
      document.title = "深的个人博客"
      links.setAttribute("href", "/logo.ico")
      //暂停状态
      this.isPlay = true
    })
  },
  methods: {
    formDate(date) {
      //格式化时间过滤器
      var m = parseInt(date / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt(date % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
    // 跳转到歌词页
    golyrics() {
      if (this.getMusicUrl == "") {
        this.$notify({
          title: "警告",
          message: "暂无播放列表,请去音乐库里选择要播放的音乐",
          type: "warning",
        })
      } else {
        let screenWidth = document.body.clientWidth
        if (screenWidth <= 600) {
          //移动端
          this.$EventBus.$emit("changeShowPlay") //更改App.vue页面Play组件的状态
        } else {
          //pc端
          this.$router.push("/musichome/misiclyrics")
        }
      }
    },
    //通过点击控制进度
    move(num) {
      let currentTime = this.getDuration * (num / 100)
      this.$store.commit("setProgress", currentTime)
      this.value = num
    },

    // 点击播放列表
    playSong(index) {
      this.$store.commit("upDateIndex", index)
    },
    // 上一首
    prevSong() {
      this.$store.commit("prev")
    },

    // 下一首
    nextSong() {
      this.$store.commit("next")
    },

    // 播放__暂停
    play_pause() {
      if (this.getState) {
        var audio = document.getElementById("myaudio")
        audio.pause()
      } else {
        if (this.getMusicList.length == 0) {
          this.$notify({
            title: "警告",
            message: "暂无播放列表,请去音乐库里选择要播放的音乐",
            type: "warning",
          })
        } else {
          var audio = document.getElementById("myaudio")
          audio.play()
        }
      }
      this.getState = !this.getState
      // this.$store.commit("changeState")
    },

    //删除播放列表里的歌曲
    deleteSong(index) {
      this.$store.commit("delete", index)
    },

    // 清空歌曲列表
    delall() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("deleteAll")
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          })
        })
    },

    // 点击更换播放模式
    changeModel() {
      let model = this.getModel + 1
      if (model > 2) {
        model = 0
      }
      this.$store.commit("changeModel", model)
    },

    // 修改音量
    changeSound(e) {
      let index = e.target.dataset.index
      if (index) {
        this.volume = index
        this.sound = this.volume
      } else {
        this.volume = Math.ceil(e.offsetX / 7)
        this.sound = this.volume
      }
    },
    // 静音
    changeVolume() {
      this.isMute = !this.isMute
      if (this.isMute) {
        this.volume = 0
      } else {
        this.volume = this.sound
      }
    },
  },
}
</script>
<style lang="scss" scoped>
$active: rgb(54, 111, 168);
.lyactive {
  color: $active !important;
}
.audiobox {
  user-select: none;
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
  background: #252e33;
  .infobox {
    position: absolute;
    top: -60px;
    left: 0px;
    height: 60px;
    width: 200px;
    background: white;
    display: flex;
    .img {
      z-index: 1;
      width: 60px;
      height: 60px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 100%;
        // width: 100% !important;
        object-fit: cover;
      }
    }
    .img:hover {
      cursor: pointer;
    }
    .audioinfo {
      flex: auto;
      position: relative;
      height: 60px;
      bottom: 0px;
      left: 0px;
      z-index: 2;
      span {
        position: absolute;
        left: 0;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        padding: 0px 10px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .name {
        height: 35px;
        line-height: 35px;
        top: 0;
        font-size: 17px;
      }
      .author {
        height: 25px;
        line-height: 25px;
        top: 35px;
        font-size: 13px;
        color: rgb(139, 139, 139);
      }
    }
  }

  .control {
    z-index: 1;
    display: flex;
    height: 100%;
    width: 150px;
    div {
      width: 40px;
      height: 100%;
      transition: 0.3s;
      color: rgb(255, 255, 255);
      text-align: center;
      justify-content: center;
      align-items: center;
      i {
        font-size: 32px;
      }
    }
    .play_pause {
      width: 70px;
      text-align: center;
      justify-content: center;
      align-items: center;
      i {
        font-size: 50px;
      }
    }
    div:hover {
      color: $active;
      cursor: pointer;
    }
  }
  .probox {
    flex: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .progress {
      display: block;
      z-index: 1;
      height: 8px;
      width: calc(100% - 40px);
      margin: 0px 20px;
      background: rgb(214, 214, 213);
      border-radius: 4px;
      display: flex;
      position: relative;
      .curentTime {
        border-radius: 4px;
        height: 8px;
        background: $active;
        width: 30%;
      }
    }
    .progress:hover {
      cursor: pointer;
    }
  }
  .other {
    // width: 240px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    .time {
      font-size: 14px;
      color: white;
      span:nth-child(2) {
        margin: 0px 10px;
      }
      margin-right: 10px;
    }
    .sound {
      width: 90px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span {
        i {
          color: white;
        }
        i:hover {
          cursor: pointer;
        }
      }
      ul {
        width: 60px;
        display: flex;
        justify-content: space-around;
        li {
          list-style: none;
          width: 4px;
          height: 10px;
          background: rgb(0, 0, 0);
          border-radius: 2px;
        }
      }
      ul:hover {
        cursor: pointer;
      }
    }
    .lybox {
      height: 100%;
      width: 36px;
      font-size: 18px;
      text-align: center;
      .lybtu {
        height: 100%;
        line-height: 50px;
        color: white;
      }
      .lybtu:hover {
        cursor: pointer;
      }
    }
    .model {
      width: 36px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 25px;
        color: white;
      }
      i:hover {
        cursor: pointer;
      }
    }
    .menu {
      z-index: 1;
      font-size: 25px;
      width: 36px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      position: relative;
      i {
        font-size: 22px;
        color: white;
      }
      i:hover {
        cursor: pointer;
      }
      .menulist {
        position: absolute;
        bottom: 50px;
        right: 0px;
        height: calc(100vh - 50px);
        width: 250px;
        background: #252e33;
        box-shadow: 0 10px 8px rgba(13, 13, 14, 0.2),
          0 0 8px rgba(10, 16, 20, 0.2);
        transition: 0.5s;
        overflow: hidden;
        .listbox {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 5;
        }
        .listitle {
          height: 40px;
          font-size: 17px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid rgb(255, 255, 255);
          position: relative;
          z-index: 5;
          span {
            z-index: 1;
            color: rgb(255, 255, 255);
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0px 10px;
          }
          .delete:hover {
            color: #ad0a49;
          }
        }
        .scrollbox {
          height: calc(100% - 40px);
        }
        .item {
          z-index: 1;
          line-height: 30px;
          height: 30px;
          color: rgb(255, 255, 255);
          font-size: 14px;
          width: 250px;
          vertical-align: middle;
          .name {
            vertical-align: middle;
            padding: 0px 10px;
            display: inline-block;
            width: 190px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .active_color {
            color: #ad0a49;
          }
          .delete {
            vertical-align: middle;
            width: 30px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            padding-right: 10px;
          }
          .delete:hover {
            color: crimson;
          }
        }
        .item:hover {
          cursor: pointer;
          background: $active;
          color: white;
        }
      }
      span {
        transition: 0.3s;
      }
      span:hover {
        cursor: pointer;
      }
    }
  }

  .bgbox {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: absolute;
  }
  .bg {
    width: 100%;
    position: absolute;
    left: 0;
    top: -350px;
    right: 0;
    bottom: 0;
    z-index: 0;
    // -webkit-filter: blur(20px);
    // filter: blur(20px);
  }
  .bg-mask {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }
}
.active {
  color: white;
  background: #629eda;
}
.icon-ci-copy {
  font-size: 19px;
}
.v_active {
  background: $active !important;
}
</style>
